<template>
  <div class="myprofile-container">
    <!-- 头像信息 -->
    <van-cell class="top-msg" @click="$router.push('/myprofiledetail')">
      <van-image
        :src="require('@/assets/头像2.png')"
        fit="contain"
        slot="icon"
        class="pic"
      ></van-image>
      <span class="name" slot="title">Charlotter</span>
      <span class="tag" slot="label"
        ><i class="iconfont icon-tag"></i>时尚博客</span
      >
    </van-cell>
    <!-- 按钮菜单 -->
    <van-grid :border="false" class="btnmenu">
      <van-grid-item>
        <i class="iconfont icon-xinyongka" slot="icon"></i>
        <span slot="text" class="text">
          会员
        </span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-favorite" slot="icon"></i>
        <span slot="text" class="text">
          收藏
        </span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-bag" slot="icon"></i>
        <span slot="text" class="text">
          购物
        </span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-store" slot="icon"></i>
        <span slot="text" class="text">
          商店
        </span>
      </van-grid-item>
    </van-grid>
    <!-- 导航列表 -->
    <van-cell-group class="navlist">
      <van-cell class="item" @click="$router.push('/myprofiledetail')">
        <span class="title" slot="icon">我的资料</span>
        <i class="iconfont icon-rightarrow"></i>
      </van-cell>
      <van-cell class="item">
        <span class="title" slot="icon">账户信息</span>
        <i class="iconfont icon-rightarrow"></i>
      </van-cell>
      <van-cell class="item">
        <span class="title" slot="icon">密码</span>
        <i class="iconfont icon-rightarrow"></i>
      </van-cell>
      <van-cell class="item">
        <span class="title" slot="icon">设置</span>
        <i class="iconfont icon-rightarrow"></i>
      </van-cell>
      <van-cell class="item">
        <span class="title" slot="icon">消息</span>
        <i class="iconfont icon-rightarrow"></i>
      </van-cell>
      <van-cell class="item">
        <span class="title" slot="icon">关于我们</span>
        <i class="iconfont icon-rightarrow"></i>
      </van-cell>
      <van-cell class="item">
        <span class="title" slot="icon">意见反馈</span>
        <i class="iconfont icon-rightarrow"></i>
      </van-cell>
      <van-cell class="item">
        <span class="title" slot="icon">帮助</span>
        <i class="iconfont icon-rightarrow"></i>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  // 定义属性
  data() {
    return {}
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less" scoped>
.myprofile-container {
  .van-cell::after {
    border-bottom: none;
  }
  // 头像信息
  .top-msg {
    padding: 40px 68px;
    text-align: left;
    .pic {
      width: 140px;
      height: 140px;
      margin-right: 40px;
    }
    .van-cell__title {
      line-height: 80px;
    }
    .name {
      font-size: 36px;
      color: #4a4a4a;
      margin: unset;
    }
    .tag {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #9b9b9b;
      .iconfont {
        color: #535353;
        font-size: 30px;
        margin-right: 5px;
      }
    }
    .van-cell__label {
      line-height: 16px;
      margin-top: unset;
    }
  }
  // 按钮菜单
  .btnmenu {
    padding: 0 64px;
    .text {
      font-size: 24px;
      color: #555555;
    }
    .iconfont {
      font-size: 40px;
      color: #4a4a4a;
    }
  }
  //   导航列表
  /deep/ .navlist {
    .van-cell {
      padding: 20px 55px;
    }
    .item {
      .title {
        font-size: 28px;
        color: #555555;
      }
      .iconfont {
        float: right;
        font-size: 32px;
        color: #d5d5d5;
      }
    }
  }
  // 清除边框
  [class*='van-hairline']::after {
    border: none;
  }
}
</style>
